<template>
<div class="box-padding">
    <div class="import-box">
        <div class="role-title">工点导入</div>
        <span class="import-title">下载文件（为提高导入的成功率，请下载并使用系统提供的模板）</span>
        <Button type="primary" @click="downMb">下载模板</Button>
        <span class="import-title" style="margin-top:20px;">上传文件（仅支持xlxs、xls,文件小<5M）</span> <Poptip trigger="focus">
        <Upload action :show-upload-list="false" :before-upload="handleUpload">
            <Input v-model="fileName" prefix="ios-cloud-upload-outline" placeholder="上传文件" style="width: 200px" readonly />
            <Button type="primary" style="margin-left:20px;">选择文件</Button>
        </Upload>
        </Poptip>
        <div class="role-bottom import-buttom">
            <Button type="primary" @click="importExel">开始导入</Button>
            <Button style="margin-left:20px;" @click="closetab">取消</Button>
        </div>
    </div>
    <Modal v-model="modal1" :mask-closable="false" title="下面数据有误,导入未成功,请修改后[继续导入]:" width="80%">
        <Table :columns="columns" :data="dataList" border ref="selection">
        </Table>
        <div slot="footer">
            <Button type="text" size="large" @click="modal1 = false">取消</Button>
            <Button type="primary" size="large" @click="saveItem">继续导入</Button>
        </div>
    </Modal>
</div>
</template>

<script>
import base from '../../../api/base'
import crudMixin from '../../../mixins/crudMixin'
import {
    mapMutations
} from 'vuex'
export default {
    mixins: [crudMixin],
    data() {
        return {
            modal1: false,
            fileName: '',
            file: null,
            header: [],
            columns: [],
            dataList: []
        }
    },
    mounted() {
        this.action = ``,
        this.dictTypeList('RISK_GRADE') //获取风险等级
    },
    methods: {
        handleUpload(file) {
            this.file = file
            this.fileName = file.name
            return false
        },
        ...mapMutations(['closeTag']),
        // 编辑关闭/取消
        closetab() {
            this.closeTag({
                name: 'workstation-ledger-import',
                params: this.$route.params,
                query:this.$route.query
            })
        },
        //公用代码--开始
        routerInfo() {
            this.closetab()
            this.$router.push({
                path: '/workstation-ledger'
            })
            localStorage.setItem('page', JSON.stringify(this.page))
        },
        // 下载模板
        downMb() {
            window.open(
                'http://211.159.175.34/model/%E5%B7%A5%E7%82%B9%E5%8F%B0%E8%B4%A6%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls'
            )
        },
        importExel() {
            let formData = new FormData()
            formData.append('file', this.file)
            this.$api.WorkstationLedger.ledgerImportExcel(formData).then(res => {
                if (res.code == 200) {
                    this.file = null
                    this.$Message.success(res.message)
                    this.routerInfo()
                } else if (res.code == 201) {
                    this.$Message.warning(res.message)
                    this.modal1 = true
                    this.header = res.data.header
                    this.dataInfo(res.data.header, res.data.dataList)
                } else {
                    this.$Message.warning(res.message)
                }
            })
        },
        dataInfo(header, dataList) {
            let temp = []
            this.modal1 = true
            const single = dataList[0]
            for (let a in single) {
                if(a === 'cloumn4'){
                    temp.push({
                        title: `${header[parseInt(a.match(/\d+/g)) - 1]}`,
                        key: a,
                        render: (h, params) => {
                            const row = params.row
                            const col = params.column
                            const selectRender = h('Select', {
                                style:{
                                    width:'80px',
                                    height:'40px'
                                },
                                props: {
                                    value: this.dataList[params.index][col.key],
                                    transfer: true,
                                },
                                on: {
                                    'on-change': (event) => {
                                        this.dataList[params.index][col.key]= event
                                    }
                                }
                            },this.leveList.map(item =>{
                                return h('Option', { // 下拉框的值
                                    props: {
                                        value: item.name,
                                        label: item.name
                                    }
                                })
                            }))
                            return selectRender    
                        }
                    })
                }else{
                    temp.push({
                        title: `${header[parseInt(a.match(/\d+/g)) - 1]}`,
                        key: a,
                        render: (h, params) => {
                            const row = params.row
                            const col = params.column
                            const inputRender = h('Input', {
                            style:{
                                width:'80px',
                                height:'40px'
                            },
                                props: {
                                    value: row[col.key]
                                },
                                on: {
                                    'on-blur': (event) => {
                                        this.dataList[params.index][col.key]= event.target.value
                                    }
                                }
                            })
                            return inputRender    
                        }
                    })
                }
                
            }
            temp.sort(
                (a, b) => parseInt(a.key.match(/\d+/g)) - parseInt(b.key.match(/\d+/g))
            )
            this.dataList = dataList
            this.columns = temp
        },
        //修改后继续导入
        saveItem() {
            let data = {
                data: {
                    dataList: this.dataList,
                    header: this.header
                }
            }
            this.$api.WorkstationLedger.workstationLedgerimportObject(data).then(
                res => {
                    if (res.code === 200) {
                        this.$Message.success(res.message)
                        this.modal1 = false
                        this.routerInfo()
                    } else if (res.code === 201) {
                        this.$Message.warning(res.message)
                        this.dataInfo(res.data.header, res.data.dataList)
                    } else {
                        this.$Message.warning(res.message)
                    }
                }
            )
        },
    }
}
</script>

<style scoped>
.import-title {
    display: block;
    height: 40px;
    line-height: 40px;
    width: 100%;
}

.import-buttom {
    position: absolute;
    width: 100%;
    bottom: 20px;
}
</style>
